<template>
  <div>
    <el-dialog
      title="版本详情"
      :visible.sync="visible"
      width="500px">
      <div class="version-info">
        <div class="version-title">
          <h2>版本信息: {{ updateInfo.versionName }}</h2>
          <p class="version-number">版本号: {{ updateInfo.version }}</p>
          <el-tag v-if="updateInfo.forceUpdate === 'Y'" type="danger" class="force-tag">强制更新</el-tag>
          <el-tag v-else type="success" class="force-tag">可选更新</el-tag>
        </div>
        
        <el-divider></el-divider>
        
        <div class="version-description">
          <h3>版本内容:</h3>
          <div class="description-content">
            <pre>{{ updateInfo.description || '无版本说明' }}</pre>
          </div>
        </div>
        
        <div class="version-time">
          <p>发布时间: {{ formatTime(updateInfo.releaseTime) }}</p>
        </div>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="visible = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getVersion } from "@/api/system/version";
import { parseTime } from "@/utils/ruoyi";

export default {
  name: "VersionUpdate",
  data() {
    return {
      visible: false,
      updateInfo: {}
    };
  },
  methods: {
    // 格式化时间
    formatTime(time) {
      return parseTime(time);
    },
    
    // 显示版本详情对话框
    showVersionDialog(versionId) {
      if (!versionId) {
        this.$message.error('版本ID不能为空');
        return;
      }
      
      getVersion(versionId).then(response => {
        if (response.code === 200 && response.data) {
          this.updateInfo = response.data;
          this.visible = true;
        } else {
          this.$message.error('获取版本信息失败');
        }
      }).catch(error => {
        console.error('获取版本信息失败:', error);
        this.$message.error('获取版本信息失败');
      });
    }
  }
};
</script>

<style scoped>
.version-info {
  padding: 10px;
}

.version-title {
  position: relative;
}

.version-title h2 {
  margin-top: 0;
  margin-bottom: 5px;
}

.version-number {
  color: #606266;
  margin: 5px 0;
}

.force-tag {
  position: absolute;
  top: 0;
  right: 0;
}

.version-description {
  margin: 15px 0;
}

.description-content {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 10px;
  max-height: 200px;
  overflow-y: auto;
}

.description-content pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  font-family: inherit;
}

.version-time {
  text-align: right;
  color: #909399;
  font-size: 12px;
}
</style> 